<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />



    <link rel="stylesheet" href="../content/css/font.css">
    <link rel="stylesheet" href="../content/css/xadmin.css">
    <link rel="stylesheet" href="../content/plugin/bootstrap/css/bootstrap.min.css">
    <link rel='stylesheet' href='../content/plugin/bootstrap/css/style.css' />

    <script src="../content/js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="../content/js/xadmin.js"></script>
    <script type="text/javascript" src="../content/js/cookie.js"></script>
    <script src="../content/lib/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../content/plugin/FileUpload/css/jquery.fileupload.css" />




</head>

<body>
    <div id="app">
        <div class="x-nav">

            <span class="nav-header">
                <a href="">首页</a>>
                <a href="">商城管理</a>>
                <a>
                    <cite>会员</cite>
                </a>
            </span>

        </div>
        <div class="x-body">

            <div>

                <button class="layui-btn" v-on:click="add"><i class="layui-icon"></i>添加</button>

            </div>
            <hr />
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" />
                            </th>
                            <th>会员名称</th>
                            <th>图标</th>
                            <th>满</th>
                            <th>折扣</th>
                            <th>备注</th>

                            <th>操作</th>
                            <th> 排序</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="uitem in arrayData">
                            <td>
                                <input type="checkbox" />
                            </td>
                            <td>{{uitem.vipname}}</td>
                            <td>
                                <img :src="uitem.imgurl" style="width: 50px;" />
                            </td>
                            <td>{{uitem.content}}</td>
                            <td>{{uitem.zhekou}}</td>
                            <td>{{uitem.descs}}</td>

                            <td>{{uitem.seq}}</td>
                            <td class="td-manage">
                                <a title="编辑" v-on:click="vupdate(uitem)" href="javascript:;">
                                    <i class="layui-icon"></i>
                                </a>
                                <a title="删除" v-on:click="vdel(uitem)" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>


        <!--添加-->
        <div class="modal fade" id="addbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="width: 80%;">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">添加信息</h4>
                    </div>
                    <div class="modal-body" style="height: 600px;overflow:auto;">
                        <form action="" v-on:submit.prevent="insert">
                            <fieldset>
                                <div class="control-group">
                                    <label for="input01" class="control-label">会员名称</label>
                                    <div class="controls">
                                        <input placeholder="" type="text" required class="form-control"
                                            v-model="addobj.vipname">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="input01" class="control-label">图片（724*337）</label>
                                    <div class="controls">
                                        <span class="btn btn-success fileinput-button">
                                            <i class="glyphicon glyphicon-plus"></i>
                                            <span>添加素材</span>
                                            <input id="fileupload1" type="file" name="imgFile" multiple>

                                        </span>

                                        <div id="showpic">
                                            <img :src="imgurl" v-if="imgurl!=''" style="width:50px;" />
                                        </div>

                                    </div>
                                </div>

                                <div class="control-group">
                                    <label for="input01" class="control-label">满</label>
                                    <div class="controls">

                                        <input placeholder="" type="text" class="form-control" v-model="addobj.content">

                                    </div>
                                </div>

                                <div class="control-group">
                                    <label for="input01" class="control-label">折扣</label>
                                    <div class="controls">

                                        <input placeholder="" type="text" class="form-control" v-model="addobj.zhekou">

                                    </div>
                                </div>

                                <div class="control-group">
                                    <label for="input01" class="control-label">备注</label>
                                    <div class="controls">
                                        <textarea rows="10" cols="200" v-model="addobj.descs"></textarea>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="input01" class="control-label">排序</label>
                                    <div class="controls">

                                        <input placeholder="" type="text" class="form-control" v-model="addobj.seq">
                                    </div>
                                </div>


                            </fieldset>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">确认</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--添加结束-->
        <!--修改-->
        <div class="modal fade" id="editbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="width: 80%;">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                    </div>
                    <div class="modal-body" style="height: 600px;overflow:auto;">
                        <form action="" v-on:submit.prevent="update">
                            <fieldset>
                                <div class="control-group">
                                    <label for="input01" class="control-label">会员名称</label>
                                    <div class="controls">
                                        <input placeholder="" type="text" required class="form-control"
                                            v-model="editobj.vipname">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="input01" class="control-label">图片（724*337）</label>
                                    <div class="controls">
                                        <span class="btn btn-success fileinput-button">
                                            <i class="glyphicon glyphicon-plus"></i>
                                            <span>添加素材</span>
                                            <input id="fileupload2" type="file" name="imgFile" multiple>

                                        </span>

                                        <div id="showpic">
                                            <img :src="imgurl" v-if="imgurl!=''" style="width:50px;" />
                                        </div>

                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="input01" class="control-label">满</label>
                                    <div class="controls">

                                        <input placeholder="" type="text" class="form-control"
                                            v-model="editobj.content">

                                    </div>
                                </div>


                                <div class="control-group">
                                    <label for="input01" class="control-label">折扣</label>
                                    <div class="controls">

                                        <input placeholder="" type="text" class="form-control" v-model="editobj.zhekou">

                                    </div>
                                </div>

                                <div class="control-group">
                                    <label for="input01" class="control-label">备注</label>
                                    <div class="controls">


                                        <textarea rows="10" cols="200" v-model="editobj.descs"></textarea>

                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="input01" class="control-label">排序</label>
                                    <div class="controls">

                                        <input placeholder="" type="text" class="form-control" v-model="editobj.seq">
                                    </div>
                                </div>







                            </fieldset>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">确认</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>






    </div>
    <link href="../content/plugin/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="../content/plugin/sweetalert/sweetalert.min.js"></script>
    <script src="../content/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../content/js/vue2.js"></script>
    <script src="../content/js/vue-nav.js"></script>
    <script src="../content/js/config.js"></script>
    <link href="../content/plugin/jsTree/style.min.css" rel="stylesheet">
    <script src="../content/plugin/jsTree/jstree.min.js"></script>
    <script src="../content/plugin/My97DatePicker/WdatePicker.js" charset="utf-8"></script>
    <script src="../content/js/moment.js"></script>

    <script src="../content/plugin/FileUpload/js/vendor/jquery.ui.widget.js"></script>
    <script src="../content/plugin/FileUpload/js/jquery.iframe-transport.js"></script>
    <script src="../content/plugin/FileUpload/js/jquery.fileupload.js"></script>

    <script>
        $(function () {
            'use strict';
            var url = apiurl + "/uploadImg";
            $('#fileupload1').fileupload({
                autoUpload: true,//是否自动上传
                url: url,
                dataType: 'json',
                done: function (e, data) {

                    console.log(data.result);
                    if (data.result.code == 200) {

                        vm.$data.imgurl = data.result.pic;


                    } else {
                        swal("上传出错了!", data.result.message, "success");

                    }
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .progress-bar').css(
                        'width',
                        progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');


            $('#fileupload2').fileupload({
                autoUpload: true,//是否自动上传
                url: url,
                dataType: 'json',
                done: function (e, data) {

                    console.log(data.result);
                    if (data.result.code == 200) {

                        vm.$data.imgurl = data.result.pic;


                    } else {
                        swal("上传出错了!", data.result.message, "success");

                    }
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .progress-bar').css(
                        'width',
                        progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');


        });

        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        var vm = new Vue({
            el: "#app",
            data: {

                all: 0,

                arrayData: [],
                allcount: 0,
                menulist: [],
                addobj: {
                    state: 1
                },
                editobj: {},
                statelist: [{ "id": 1, "name": "是" }, { "id": 0, "name": "否" }],
                vipcard: [
                    "../content/images/card1.png", "../content/images/card2.png", "../content/images/card3.png", "../content/images/card4.png", "../content/images/card5.png",
                    "../content/images/card6.png", "../content/images/card7.png"
                ],
                chooseitem: [],
                goodlist: [],
                status: false,
                card: "../content/images/card1.png",
                quanyi: [],
                zhekou: {},
                goodlist: [],
                zengsong: [],
                style: 1,
                imgurl: "",
                couponlist: [],
                search: {
                    page: 1,
                    size: 10,
                    type: 2,

                }

            },
            filters: {
                nonull: function (value) {
                    if (value == "0") {
                        return "";
                    } else {
                        return value
                    }
                },

                moneyformat: function (value) {
                    console.log("value", value);
                    if (typeof (value) != "undefined" && value != "" && value != null) {
                        return parseFloat(value).toFixed(2);
                    } else {
                        return value;
                    }

                    //Number(parseFloat(value).toFixed(3).slice(0, -1))
                }
            },
            components: {
                'vue-nav': Vnav
            },
            methods: {
                insertzhekou: function () {

                    this.zhekou.checkendtime = moment().add(this.zhekou.endtime, 'years').format('YYYY-MM-DD');
                    this.quanyi.push(this.zhekou);
                    $("#addzhekoubox").modal('hide');
                },
                insertzengsong() {
                    this.zengsong = this.chooseitem;
                    console.log(this.chooseitem);
                    $("#addzhekouchuzhibox").modal('hide');

                },


                gettypelist: function (addobj) {
                    var self = this;

                    $.post(apiurl + "/quanxian/getdicbycode", { code: "chuzhi" }, function (data) {
                        var arrayObj = new Array();
                        data = data.data;
                        console.log("data", data);
                        for (var i = 0; i < data.length; i++) {

                            var tom = new Object();
                            var state = { "opened": false };
                            tom.id = data[i].id;
                            tom.state = state;
                            tom.text = data[i].value;


                            arrayObj[i] = tom;


                        }

                        console.log(JSON.stringify(arrayObj));

                    });

                },

                additem: function (uitem) {

                    var b = false;
                    for (var i = 0; i < this.chooseitem.length; i++) {
                        if (this.chooseitem[i].id == uitem.id) {
                            this.chooseitem[i].num = this.chooseitem[i].num + 1;

                            b = true;
                            break;
                        }
                    }
                    if (b == false) {

                        if (uitem.type == "2") {
                            uitem.num = 0;
                        }

                        this.chooseitem.push(uitem);
                    } else {

                    }
                },
                delitem: function (uitem) {
                    this.chooseitem.remove(uitem);
                    var sum = 0;
                    this.chooseitem.forEach(v => {
                        sum += v.price * v.num;
                    });
                    this.sum = sum;
                },

                choosechuzhi: function () {
                    $("#addzhekouchuzhibox").modal('show');

                },
                add: function () {

                    $("#addbox").modal('show');
                },
                getcouponlist: function () {
                    var self = this;
                    $.post(apiurl + "/myapp/coupon/list", {
                        page: 1,
                        size: 999,
                        clinicid: clinicid
                    }, function (_result) {
                        console.log(_result);
                        self.couponlist = _result.data.list;

                    });
                },
                addzhekou: function () {
                    this.zhekou = {};
                    this.getcouponlist();

                    $("#addzhekouchuzhibox").modal('show');
                },
                addzhekouchuzhi: function () {
                    $("#addzhekouchuzhibox").modal('show');

                },

                insert: function () {
                    var self = this;
                    this.addobj.id = "";
                    this.addobj.style = this.style;
                    this.addobj.type = 2;
                    this.addobj.imgurl = this.imgurl;


                    console.log("addobj", this.addobj);

                    $.post(apiurl + "/admin/vip/add", this.addobj, function (data) {
                        if (data.status == 200) {
                            $("#addbox").modal('hide');
                            swal("success", "添加成功", "success");
                            self.getdata("");
                        } else {
                            swal("系统提示", data.message, "error");
                        }

                    });
                },
                getdata: function (_keycontent) {  //查询数据

                    var self = this;
                    $.post(apiurl + "/admin/vip/list", this.search, function (_result) {
                        console.log(_result);
                        self.arrayData = _result.data;
                        self.all = _result.allcount;
                        self.allcount = _result.count;
                    });

                },
                callback: function (data) {
                    var self = this;
                    this.search.page = data;
                    $.post(apiurl + "/admin/vip/list", this.search, function (_result) {
                        self.arrayData = _result.data;
                        self.all = _result.allcount;
                        self.allcount = _result.count;
                    });
                },
                vupdate: function (uitem) {

                    this.editobj = uitem;



                    $("#editbox").modal('show');

                },
                update: function () {
                    var self = this;

                    this.editobj.imgurl = this.imgurl;


                    $.post(apiurl + "/admin/vip/edit", this.editobj, function (data) {
                        if (data.status == 200) {
                            $("#editbox").modal('hide');
                            swal("success", "修改成功", "success");
                            self.getdata("");
                        } else {
                            swal("系统提示", data.message, "error");
                        }

                    });

                },
                vdel: function (uitem) {
                    var self = this;
                    swal({
                        title: "确定要删除吗?",
                        text: "",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "是",
                        cancelButtonText: '否',
                        closeOnConfirm: false
                    }, function () {


                        $.ajax({
                            url: apiurl + "/admin/vip/del",
                            type: 'DELETE',
                            data: { "id": uitem.id },
                            success: function (result) {
                                if (result.status == 200) {
                                    swal("系统提示", "已删除", "success");
                                    self.getdata("");
                                } else {
                                    swal("系统提示", "系统异常", "success");
                                }
                            }
                        });

                    });
                },

            },
            created: function () {  //初始化事件里边去调用查询方法
                this.getdata("");



            }
        });


    </script>
</body>

</html>